import React, { startTransition, useState } from 'react';
import l from './login.module.scss'
import { Input, Form, Button, Toast } from 'antd-mobile';
import { useNavigate } from 'react-router-dom';
import { loginAPI } from '../../apis/login';
import { useDispatch, useSelector } from 'react-redux'

function Login(props) {
    const [username, setUsername] = useState()  //用户名
    const [password, setPassword] = useState()  //密码

    /* ---------------------------------- 点击返回 ---------------------------------- */
    const navigate = useNavigate()
    const backAction = () => {
        startTransition(() => {
            navigate('/')
        })
    }

    /* ---------------------------------- 点击登录 ---------------------------------- */
    const inputChange = (type) => (value) => {
        if (type === 'username') {
            setUsername(value)
        } else if (type === 'password') {
            setPassword(value)
        }

    }
    const dispatch = useDispatch()
    const loginAction = async () => {
        console.log(username, password);

        const res = await loginAPI(username, password) //请求登录
        console.log(111);

        if (res.code === 200) {
            localStorage.setItem('token', res.token)
            dispatch({
                type: 'user/tokenReducer',
                payload: {
                    token: res.token
                }
            })
            dispatch({
                type: 'user/userInfoReducer',
                payload: {
                    userInfo: res.userInfo
                }
            })
            dispatch({
                type: 'user/isLoginReducer',
                payload: {
                    isLogin: true
                }
            })
            Toast.show({
                icon: 'success',
                content: '登录成功',
            })
            navigate('/')
        } else {
            Toast.show({
                icon: 'error',
                content: res.msg,
            })
        }

    }

    return (
        <div className={l.login}>
            <div className={l.logo}>
                <img src="http://localhost:8080/images/shoesdogLogo1.png" alt="" />
            </div>
            <div className={l.popup}>
                <Form className={l.form} mode='card'>

                    <Form.Item className={l.input}>
                        <Input
                            placeholder='请输入用户名'
                            value={username}
                            onChange={inputChange('username')}
                        />
                    </Form.Item>
                    <Form.Item className={l.input} help="1111">
                        <Input
                            placeholder='请输入密码'
                            value={password}
                            onChange={inputChange('password')}
                        />
                    </Form.Item>

                </Form>
                <div className={l.btn}>
                    <Button onClick={loginAction} size="middle" type='submit' color='primary'>
                        登录
                    </Button>
                    <Button onClick={backAction} fill="outline" size="middle" type='submit' color='primary'>
                        返回
                    </Button>
                </div>
                <div className={l.register}>没有账号？<span>立即注册</span></div>

            </div>

        </div>
    );
}

export default Login;